<template>
	<div class="main">
		<el-form ref="ruleFormRef" :inline="true" :model="dataForm"
			class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto">
			<el-form-item label="记录类型">
				<el-select v-model="dataForm.type" placeholder="请选择记录类型" class="!w-[180px]" clearable>
					<el-option v-for="(item, index) in typeOptions" :key="index" :label="item.name" :value="item.id" />
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" :icon="useRenderIcon('ri:search-line')" :loading="loading"
					@click="getInitTable">
					搜索
				</el-button>
				<el-button :icon="useRenderIcon(Refresh)" @click="resetForm(ruleFormRef)">
					重置
				</el-button>
			</el-form-item>
		</el-form>

		<div ref="contentRef" class="flex">
			<PureTableBar class="w-full" style="transition: width 220ms cubic-bezier(0.4, 0, 0.2, 1)" title="通知记录列表"
				:columns="dataColumns" @refresh="getInitTable">

				<template v-slot="{ size, dynamicColumns }">
					<pure-table ref="tableRef" align-whole="center" showOverflowTooltip table-layout="auto"
						:loading="loading" adaptive :adaptiveConfig="{ offsetBottom: 108 }" :size="size"
						:data="dataList" :columns="dynamicColumns" :pagination="pagination" :paginationSmall="false"
						:header-cell-style="{  background: 'var(--el-fill-color-light)', color: 'var(--el-text-color-primary)'
						}" @page-size-change="handleSizeChange" @page-current-change="handleCurrentChange">
						
					</pure-table>
				</template>
			</PureTableBar>
		</div>
	</div>
</template>

<script setup lang="ts">
	import ReCol from "@/components/ReCol";
	import { useRenderIcon } from "@/components/ReIcon/src/hooks";
	import Refresh from "@iconify-icons/ep/refresh";
	import { ref, reactive, onMounted, toRaw } from "vue";
	import type { PaginationProps } from "@pureadmin/table";
	import type { CascaderProps } from 'element-plus'
	import { message } from "@/utils/message";
	import { PureTableBar } from "@/components/RePureTableBar";

	import {
		getAlarmRecordApi,
	} from "@/api/alarmConfig";

	const ruleFormRef = ref();
	const dataForm = reactive({
		type: null,
		page: 1,
		perPage: 10,
	})

	const materialInfo = ref({
		number: '--',
		name: '--',
		category: {
			name: '--'
		},
		warehouse: {
			name: '--'
		},
		unit: {
			name: '--'
		},
		remarks: '',
		spec: ''
	})

	const pagination = reactive<PaginationProps>({
		total: 0,
		pageSize: 10,
		currentPage: 1,
		background: true
	});
	const loading = ref(false)
	const dataList = ref([])
	const typeOptions = ref([
		{
			id: 1,
			name: '警告'
		},
		{
			id: 2,
			name: '错误'
		}
	])
	const dataColumns : TableColumnList = [
		{
			label: "ID",
			prop: "warehouseProductFlowlogId",
			width: 80
		},
		
		{
			label: "消息内容",
			prop: "material.unit.name"
		},
		{
			label: "报警行为",
			prop: "type",
			formatter: (row : any) => {
				return row.type === 1?'上架入库':'下架出库'
			}
		},
		{
			label: "处理状态",
			prop: "number",
		},
		{
			label: "推送人",
			prop: "number",
		},
		{
			label: "创建者",
			prop: "createUser.username"
		},
		{
			label: "创建时间",
			prop: "createdAt"
		},
	]
	const getInitTable = async () => {
		loading.value = true;
		const { result } = await getAlarmRecordApi(toRaw(dataForm));
		dataList.value = result.list;
		pagination.total = result.total;
		pagination.pageSize = result.perPage * 1;
		pagination.currentPage = result.page * 1;

		setTimeout(() => {
			loading.value = false;
		}, 150);
	}
	const handleSizeChange = (val) => {
		dataForm.page = 1;
		dataForm.perPage = val;
		getInitTable()
	}
	const handleCurrentChange = (val) => {
		dataForm.page = val;
		getInitTable()
	}
	onMounted(() => {
		getInitTable()
	})
	const resetForm = formEl => {
		if (!formEl) return;
		dataForm.type = null;
		formEl.resetFields();
		getInitTable();
	};
</script>

<style scoped>
	.main-content {
		margin: 10px 10px 0 !important;
	}

	.appendNum {
		cursor: pointer;
	}

	:deep(.el-input-number) {
		width: 100%;
	}
</style>